<template>
	<view class="cell-item" :class="{'bordertop': borderTop ,'borderbottom': borderBottom}">
		<view class="left-box">
			<view class="must-icon" v-if="important == true">
				*
			</view>
			<view class="title">
				{{title}}
			</view>
		</view>
		<view class="right-box" :class="{'right-scroll' : type== 'personal'}">
			<view class="placeholder" v-if="type== 'option' && value == '' || type == 'personal' && List.length == 0  && !radiovalue.userName">
				{{placeholder}}
			</view>
			<view class="value" v-if="type== 'option' && value != ''">
				{{value}}
			</view>
			<scroll-view class="value scroll-box" scroll-x v-if="type== 'personal' && (List.length > 0 || radiovalue.userName)">
				<view class="" v-if="radiovalue.userName">
					{{radiovalue.userName}}
				</view>
				<view class="tag-box">
					<view class="tag-item" v-for="(item,index) in List" :key="item.id" v-if="List.length > 0">
							{{item.userName}}
					</view>
				</view>
			</scroll-view>
			<view class="value" v-if="type== 'input'">
				<input class="input" v-if="disabled == false" type="text" @input="inputChange" :placeholder="placeholder" :value="value" />
				<view class="input" v-if="disabled == true">
					{{value == '' ? placeholder : value}}
				</view>
			</view>
			<image v-if="type == 'option' || type == 'personal'" src="/static/image/more_right_icon.png" class="right-icon" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{ // 标题
				type:String,
				default:''
			},
			name:{
				type:String,
				default:''
			},
			disabled:{
				type:Boolean,
				default:false,
			},
			important:{ // 是否必填项
				type:Boolean,
				default:false,
			},
			placeholder:{ // 提示内容
				type:String,
				default:'请选择'
			},
			borderTop:{ // 上框线条
				type:Boolean,
				default:false,
			},
			borderBottom:{ // 下框线条
				type:Boolean,
				default:false,
			},
			List:{
				type:Array,
				default:[],
			},
			radiovalue:{
				type:Object,
				default:{}
			},
			value:{ // 显示内容
				type:String,
				default:''
			},
			type:{ // 显示类型
				type:String,
				default:'option'
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			selectTap:function(){
				this.$emit('tap');
			},
			inputChange:function(e){
				this.$emit('input',{name:this.name,value:e.target.value});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bordertop{
		border-top: 1px solid #eaeaea;
	}
	.borderbottom{
		border-bottom: 1px solid #eaeaea;
	}
	.cell-item{
		width: 100%;
		position: relative;
		background-color:white;
		height: 80rpx;
		.left-box{
			display: flex;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 80rpx;
			.must-icon{
				color: red;
			}
		.cell-icon{
			width: 40rpx;
			height: 40rpx;
			margin: 20rpx 0;
		}
		.title{
			margin-left: 10rpx;
		}
		}
		.right-box{
			position: absolute;
			display: flex;
			right:20rpx;
			top: 20rpx;
			.placeholder{
				color: #b8bbbd;
			}
			.value{
				float: right;
			}
			.right-icon{
				float: right;
			}
			.scroll-box{
				width:calc(100% - 30rpx);
				// margin-left:calc(20% - 30rpx);
				white-space: nowrap;
				display: flex;
				.tag-box{
					display: flex;
					.tag-item{
						border:1px solid #b8bbbd;
						margin-right: 10rpx;
						padding:0 20rpx;
					}
				}
			}
			.input{
				flex: 1;
				text-align: right;
			}
			.right-icon{
				width: 30rpx;
				height: 30rpx;
				margin-top:6rpx;
			}
			
		}
		.right-scroll{
			max-width:60%;
		}
	}
</style>
